<template>
  <div class="white-noise-page">
    <!-- 背景容器 -->
    <div class="background-container">
      <!-- Canvas动画背景 -->
      <canvas id="particles-canvas" class="particles-canvas"></canvas>
      <div class="background-overlay"></div>
    </div>
    
    <!-- 主要内容 -->
    <div class="content-container">
      <!-- 顶部控制栏 -->
      <div class="top-controls">
        <!-- 返回按钮 -->
        <button class="back-btn" @click="goBack">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
            <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          返回主页
        </button>
        
        <div class="global-controls">
          <!-- 总音量控制 -->
          <div class="volume-control">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" stroke="currentColor" stroke-width="2" fill="none"/>
              <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" stroke="currentColor" stroke-width="2" fill="none"/>
            </svg>
            <input 
              type="range" 
              min="0" 
              max="100" 
              :value="masterVolume"
               @input="whiteNoiseStore.updateMasterVolume($event.target.value)"
              class="volume-slider"
            />
            <span class="volume-text">{{ masterVolume }}%</span>
          </div>
          
          <!-- 总开关 -->
          <button 
            class="master-toggle" 
:class="{ active: masterEnabled }"
            @click="toggleMaster"
          >
            <span class="toggle-switch"></span>
            <span class="toggle-label">{{ masterEnabled ? '开启' : '关闭' }}</span>
          </button>
        </div>
      </div>
      
      <!-- 预设组合 -->
      <div class="presets-section" style="margin-top: 280px;">
        <h2>预设组合</h2>
        <div class="presets-grid">
          <div 
            v-for="preset in presets" 
            :key="preset.id"
            class="preset-card"
            :class="{ active: currentPreset === preset.id }"
            @click="applyPreset(preset)"
          >
            <div class="preset-icon" v-html="preset.icon"></div>
            <div class="preset-info">
              <h3>{{ preset.name }}</h3>
              <p>{{ preset.description }}</p>
            </div>
            <div class="preset-status">
              <div v-if="currentPreset === preset.id" class="status-indicator playing">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <rect x="6" y="4" width="4" height="16" fill="currentColor"/>
                  <rect x="14" y="4" width="4" height="16" fill="currentColor"/>
                </svg>
              </div>
              <div v-else class="status-indicator stopped">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <polygon points="5 3 19 12 5 21 5 3" fill="currentColor"/>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 白噪音控制区域 -->
      <div class="noise-section">
        <h2>自定义组合</h2>
        <div class="noise-grid">
          <div 
            v-for="noise in whiteNoises" 
            :key="noise.name"
            class="noise-card"
            :class="{ active: noise.enabled && masterEnabled, disabled: !masterEnabled }"
            @click="handleNoiseCardClick(noise.name)"
          >
            <div class="noise-icon" v-html="getNoiseIcon(noise.name)"></div>
            <div class="noise-info">
              <div class="noise-label">{{ noise.label }}</div>
              <div class="noise-volume" v-if="noise.enabled && masterEnabled">
                <input 
                  type="range" 
                  min="0" 
                  max="100" 
:value="noise.volume"
                  @input="setNoiseVolume(noise.name, $event.target.value)"
                  @click.stop
                  class="volume-slider"
                />
                <span class="volume-text">{{ noise.volume }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      

    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useWhiteNoiseStore } from '@/stores/whiteNoiseStore'

const router = useRouter()
const whiteNoiseStore = useWhiteNoiseStore()

// 使用store中的状态
const masterEnabled = computed(() => whiteNoiseStore.masterEnabled)
const masterVolume = computed(() => whiteNoiseStore.masterVolume)
const currentPreset = computed(() => whiteNoiseStore.currentPreset)
const currentBackgroundColor = computed(() => whiteNoiseStore.currentBackgroundColor)
const whiteNoises = computed(() => whiteNoiseStore.whiteNoises)

let animationId = null
let canvas = null
let ctx = null
let particles = []

// 预设组合
const presets = ref([
  {
    id: 'focus',
    name: '专注工作',
    description: '咖啡厅 + 轻雨声，营造专注氛围',
    icon: `<svg width="40" height="40" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
      <path d="M12 1v6m0 6v6m11-7h-6m-6 0H1" stroke="currentColor" stroke-width="2"/>
    </svg>`,
    noises: [
      { name: 'cafe', volume: 40 },
      { name: 'rain_light', volume: 30 }
    ],
    backgroundColor: '#8B4513', // 咖啡色调
    particleType: 'cafe' // 使用咖啡厅粒子动画
  },
  {
    id: 'relax',
    name: '放松休息',
    description: '海浪声 + 火焰声，舒缓身心',
    icon: `<svg width="40" height="40" viewBox="0 0 24 24" fill="none">
      <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" stroke="currentColor" stroke-width="2"/>
    </svg>`,
    noises: [
      { name: 'sea', volume: 50 },
      { name: 'fire', volume: 35 }
    ],
    backgroundColor: '#2F4F4F', // 深海绿
    particleType: 'sea' // 使用海浪粒子动画
  },
  {
    id: 'sleep',
    name: '安眠入睡',
    description: '雨声 + 轻雨声，助你安然入眠',
    icon: `<svg width="40" height="40" viewBox="0 0 24 24" fill="none">
      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" stroke-width="2"/>
    </svg>`,
    noises: [
      { name: 'rain', volume: 45 },
      { name: 'rain_light', volume: 25 }
    ],
    backgroundColor: '#483D8B', // 深紫蓝
    particleType: 'rain' // 使用雨滴粒子动画
  },
  {
    id: 'nature',
    name: '自然之声',
    description: '雨声 + 海浪声 + 火焰声，回归自然',
    icon: `<svg width="40" height="40" viewBox="0 0 24 24" fill="none">
      <path d="M17 8c0 8-7 4-7 4s-7 4-7-4a7 7 0 1114 0z" stroke="currentColor" stroke-width="2"/>
      <path d="M16.7 17.3l2.3-2.3m-10.7 0L6 17.3" stroke="currentColor" stroke-width="2"/>
    </svg>`,
    noises: [
      { name: 'rain', volume: 35 },
      { name: 'sea', volume: 40 },
      { name: 'fire', volume: 25 }
    ],
    backgroundColor: '#556B2F', // 橄榄绿
    particleType: 'fire' // 使用火焰粒子动画
  },
  {
    id: 'urban',
    name: '都市生活',
    description: '城市声 + 交通声 + 咖啡厅，都市节奏',
    icon: `<svg width="40" height="40" viewBox="0 0 24 24" fill="none">
      <path d="M3 21h18M5 21V7l6-4v18M13 21V9h8v12M9 9v.01M9 12v.01M9 15v.01M17 12v.01M17 15v.01M17 18v.01" stroke="currentColor" stroke-width="2"/>
    </svg>`,
    noises: [
      { name: 'city', volume: 30 },
      { name: 'road', volume: 25 },
      { name: 'cafe', volume: 35 }
    ],
    backgroundColor: '#696969', // 暗灰色
    particleType: 'road' // 使用交通粒子动画
  }
])

// 白噪音图标映射
const getNoiseIcon = (noiseName) => {
  const iconMap = {
    rain: `<svg width="35" height="35" viewBox="0 0 24 24" fill="none">
      <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" stroke="currentColor" stroke-width="2" fill="none"/>
      <path d="M10 20v2M14 20v2M18 20v2M6 20v2" stroke="currentColor" stroke-width="2"/>
    </svg>`,
    cafe: `<svg width="35" height="35" viewBox="0 0 24 24" fill="none">
      <path d="M17 8h1a4 4 0 1 1 0 8h-1" stroke="currentColor" stroke-width="2" fill="none"/>
      <path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V8z" stroke="currentColor" stroke-width="2" fill="none"/>
      <line x1="6" y1="2" x2="6" y2="4" stroke="currentColor" stroke-width="2"/>
      <line x1="10" y1="2" x2="10" y2="4" stroke="currentColor" stroke-width="2"/>
      <line x1="14" y1="2" x2="14" y2="4" stroke="currentColor" stroke-width="2"/>
    </svg>`,
    city: `<svg width="35" height="35" viewBox="0 0 24 24" fill="none">
      <path d="M3 21h18M5 21V7l6-4v18M13 21V9h8v12M9 9v.01M9 12v.01M9 15v.01M17 12v.01M17 15v.01M17 18v.01" stroke="currentColor" stroke-width="2" fill="none"/>
    </svg>`,
    fire: `<svg width="35" height="35" viewBox="0 0 24 24" fill="none">
      <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" stroke="currentColor" stroke-width="2" fill="none"/>
    </svg>`,
    rain_light: `<svg width="35" height="35" viewBox="0 0 24 24" fill="none">
      <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" stroke="currentColor" stroke-width="2" fill="none"/>
      <path d="M8 19v2M12 19v2M16 19v2" stroke="currentColor" stroke-width="1.5"/>
    </svg>`,
    sea: `<svg width="35" height="35" viewBox="0 0 24 24" fill="none">
      <path d="M2 12c.6-2.4 1.4-4 2.8-4s2.2 1.6 2.8 4c.6 2.4 1.4 4 2.8 4s2.2-1.6 2.8-4c.6-2.4 1.4-4 2.8-4s2.2 1.6 2.8 4c.6 2.4 1.4 4 2.8 4" stroke="currentColor" stroke-width="2" fill="none"/>
      <path d="M2 16c.6-2.4 1.4-4 2.8-4s2.2 1.6 2.8 4c.6 2.4 1.4 4 2.8 4s2.2-1.6 2.8-4c.6-2.4 1.4-4 2.8-4s2.2 1.6 2.8 4c.6 2.4 1.4 4 2.8 4" stroke="currentColor" stroke-width="2" fill="none"/>
    </svg>`,
    road: `<svg width="35" height="35" viewBox="0 0 24 24" fill="none">
      <path d="M7 17h10l4-7H3l4 7z" stroke="currentColor" stroke-width="2" fill="none"/>
      <circle cx="7" cy="19" r="2" stroke="currentColor" stroke-width="2" fill="none"/>
      <circle cx="17" cy="19" r="2" stroke="currentColor" stroke-width="2" fill="none"/>
      <path d="M5 17H3a2 2 0 0 1-2-2v-4m18 6h2a2 2 0 0 0 2-2v-4" stroke="currentColor" stroke-width="2" fill="none"/>
    </svg>`
  }
  return iconMap[noiseName] || `<svg width="35" height="35" viewBox="0 0 24 24" fill="none">
    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" stroke="currentColor" stroke-width="2" fill="none"/>
    <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" stroke="currentColor" stroke-width="2" fill="none"/>
  </svg>`
}

// 粒子类
class Particle {
  constructor(canvas, config) {
    this.canvas = canvas
    this.config = config
    this.reset()
  }
  
  reset() {
    this.x = Math.random() * this.canvas.width
    this.y = Math.random() * this.canvas.height
    this.vx = (Math.random() - 0.5) * this.config.speed
    this.vy = (Math.random() - 0.5) * this.config.speed
    this.size = Math.random() * (this.config.maxSize - this.config.minSize) + this.config.minSize
    this.opacity = Math.random() * (this.config.maxOpacity - this.config.minOpacity) + this.config.minOpacity
    this.color = this.config.colors[Math.floor(Math.random() * this.config.colors.length)]
    this.life = 1
    this.decay = this.config.decay || 0
  }
  
  update() {
    // 根据预设类型更新粒子
    switch (this.config.type) {
      case 'rain':
        this.y += this.config.speed
        if (this.y > this.canvas.height) {
          this.y = -10
          this.x = Math.random() * this.canvas.width
        }
        break
      case 'fire':
        this.y -= this.config.speed
        this.x += (Math.random() - 0.5) * 2
        this.life -= this.decay
        if (this.y < -10 || this.life <= 0) {
          this.y = this.canvas.height + 10
          this.x = Math.random() * this.canvas.width
          this.life = 1
        }
        break
      case 'sea':
        this.x += this.vx
        this.y += Math.sin(Date.now() * 0.001 + this.x * 0.01) * 0.5
        if (this.x > this.canvas.width) this.x = -10
        if (this.x < -10) this.x = this.canvas.width
        break
      case 'road':
        this.x -= this.config.speed
        if (this.x < -10) {
          this.x = this.canvas.width + 10
          this.y = Math.random() * this.canvas.height
        }
        break
      default:
        this.x += this.vx
        this.y += this.vy
        if (this.x > this.canvas.width || this.x < 0) this.vx *= -1
        if (this.y > this.canvas.height || this.y < 0) this.vy *= -1
    }
  }
  
  draw(ctx) {
    ctx.save()
    ctx.globalAlpha = this.opacity * this.life
    ctx.fillStyle = this.color
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
    ctx.fill()
    ctx.restore()
  }
}

// 获取粒子配置
const getParticleConfig = (presetId) => {
  const configs = {
    rain: {
      type: 'rain',
      count: 150,
      colors: ['#60a5fa', '#93c5fd', '#dbeafe'],
      minSize: 1,
      maxSize: 3,
      minOpacity: 0.5,
      maxOpacity: 0.9,
      speed: 8,
      backgroundColor: '#1e3a8a'
    },
    cafe: {
      type: 'default',
      count: 60,
      colors: ['#fbbf24', '#f59e0b', '#d97706'],
      minSize: 2,
      maxSize: 8,
      minOpacity: 0.3,
      maxOpacity: 0.8,
      speed: 1,
      backgroundColor: '#92400e'
    },
    city: {
      type: 'default',
      count: 100,
      colors: ['#f3f4f6', '#d1d5db', '#9ca3af'],
      minSize: 1,
      maxSize: 4,
      minOpacity: 0.6,
      maxOpacity: 1,
      speed: 1.5,
      backgroundColor: '#374151'
    },
    fire: {
      type: 'fire',
      count: 120,
      colors: ['#fbbf24', '#f59e0b', '#dc2626', '#b91c1c'],
      minSize: 1,
      maxSize: 6,
      minOpacity: 0.4,
      maxOpacity: 1,
      speed: 4,
      decay: 0.02,
      backgroundColor: '#dc2626'
    },
    sea: {
      type: 'sea',
      count: 80,
      colors: ['#7dd3fc', '#38bdf8', '#0ea5e9'],
      minSize: 2,
      maxSize: 8,
      minOpacity: 0.4,
      maxOpacity: 0.8,
      speed: 2,
      backgroundColor: '#0369a1'
    },
    road: {
      type: 'road',
      count: 50,
      colors: ['#fbbf24', '#f3f4f6', '#ef4444'],
      minSize: 1,
      maxSize: 3,
      minOpacity: 0.5,
      maxOpacity: 0.9,
      speed: 3,
      backgroundColor: '#1f2937'
    }
  }
  
  return configs[presetId] || {
    type: 'default',
    count: 80,
    colors: ['#ffffff'],
    minSize: 1,
    maxSize: 5,
    minOpacity: 0.3,
    maxOpacity: 0.7,
    speed: 2,
    backgroundColor: '#2563eb'
  }
}

// 初始化Canvas和粒子
const initParticles = async (presetId = null) => {
  try {
    // 停止当前动画
    if (animationId) {
      cancelAnimationFrame(animationId)
      animationId = null
    }
    
    await nextTick()
    
    canvas = document.getElementById('particles-canvas')
    if (!canvas) return
    
    ctx = canvas.getContext('2d')
    
    // 设置Canvas尺寸
    const resizeCanvas = () => {
      canvas.width = canvas.offsetWidth
      canvas.height = canvas.offsetHeight
    }
    
    resizeCanvas()
    window.addEventListener('resize', resizeCanvas)
    
    // 获取配置并创建粒子
    const config = getParticleConfig(presetId)
    particles = []
    
    for (let i = 0; i < config.count; i++) {
      particles.push(new Particle(canvas, config))
    }
    
    // 设置背景色
    canvas.style.backgroundColor = config.backgroundColor
    
    // 开始动画循环
    const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      
      particles.forEach(particle => {
        particle.update()
        particle.draw(ctx)
      })
      
      animationId = requestAnimationFrame(animate)
    }
    
    animate()
    
  } catch (error) {
    console.error('Failed to initialize particles:', error)
  }
}

// 方法
const initializeAudio = async () => {
  await whiteNoiseStore.initializeAudio()
}

const toggleNoise = async (noiseName) => {
  await whiteNoiseStore.toggleNoise(noiseName)
}

const stopAllNoise = () => {
  whiteNoiseStore.stopAllNoise()
}

const setNoiseVolume = (noiseName, volume) => {
  whiteNoiseStore.setNoiseVolume(noiseName, parseInt(volume))
}

const toggleMaster = async () => {
  await whiteNoiseStore.toggleMaster()
}

// updateMasterVolume方法已移到store中

const handleNoiseCardClick = async (noiseName) => {
  if (!masterEnabled.value) return
  
  // 切换噪音状态
  await toggleNoise(noiseName)
  
  // 清除当前预设状态
  whiteNoiseStore.clearCurrentPreset()
  
  // 获取当前活跃的粒子类型并更新动画
  const activeParticleType = whiteNoiseStore.getActiveParticleType()
  if (activeParticleType) {
    await initParticles(activeParticleType)
  } else {
    await initParticles()
  }
}

const applyPreset = async (preset) => {
  // 检查当前是否已经是这个预设
  if (currentPreset.value === preset.id) {
    // 如果是同一个预设，则停止播放
    whiteNoiseStore.stopAllNoise()
    // 清除粒子动画，恢复默认状态
    await initParticles()
  } else {
    // 如果不是同一个预设，则应用新预设
    await whiteNoiseStore.applyPreset(preset)
    // 初始化对应的粒子动画，使用预设的particleType
    await initParticles(preset.particleType)
  }
}



const goBack = () => {
  // 不停止白噪音，直接返回主页
  router.push('/todo')
}

// 生命周期
onMounted(async () => {
  await initializeAudio()
  
  // 如果有当前预设，恢复对应的粒子动画
  if (currentPreset.value) {
    const preset = presets.value.find(p => p.id === currentPreset.value)
    if (preset) {
      await initParticles(preset.particleType)
    } else {
      await initParticles()
    }
  } else {
    // 检查是否有启用的噪音，显示对应动画
    const enabledNoises = whiteNoises.value.filter(n => n.enabled)
    if (enabledNoises.length > 0) {
      let particleType = enabledNoises[0].name
      if (particleType === 'rain_light') {
        particleType = 'rain'
      }
      await initParticles(particleType)
    } else {
      await initParticles()
    }
  }
})

onUnmounted(() => {
  // 不停止白噪音，只清理Canvas动画
  if (animationId) {
    cancelAnimationFrame(animationId)
    animationId = null
  }
  
  // 清理事件监听器
  window.removeEventListener('resize', () => {})
})
</script>

<style lang="less" scoped>
.white-noise-page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.background-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background-color 0.8s ease-in-out;
  
  .particles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
  }
  
  .background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 0.4) 100%
    );
    pointer-events: none;
  }
}

.content-container {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow-y: auto;
}

.top-controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  
  .back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-1px);
    }
    
    svg {
      color: white;
    }
  }
  
  .page-title {
    text-align: center;
    flex: 1;
    
    h1 {
      font-size: 36px;
      font-weight: 700;
      color: white;
      margin: 0 0 4px 0;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    p {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.8);
      margin: 0;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }
  }
  
  .global-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .volume-control {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 8px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      
      svg {
        color: white;
      }
      
      .volume-slider {
        width: 100px;
        height: 3px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        outline: none;
        cursor: pointer;
        
        &::-webkit-slider-thumb {
          appearance: none;
          width: 14px;
          height: 14px;
          background: white;
          border-radius: 50%;
          cursor: pointer;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }
      }
      
      .volume-text {
        color: white;
        font-size: 12px;
        font-weight: 500;
        min-width: 35px;
        text-align: right;
      }
    }
    
    .master-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      backdrop-filter: blur(10px);
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(255, 255, 255, 0.2);
      }
      
      .toggle-switch {
        position: relative;
        width: 36px;
        height: 20px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        transition: all 0.3s ease;
        
        &::after {
          content: '';
          position: absolute;
          top: 2px;
          left: 2px;
          width: 16px;
          height: 16px;
          background: white;
          border-radius: 50%;
          transition: all 0.3s ease;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
      }
      
      &.active .toggle-switch {
        background: var(--primary-color, #6366f1);
        
        &::after {
          transform: translateX(16px);
        }
      }
      
      .toggle-label {
        color: white;
        font-size: 12px;
        font-weight: 500;
      }
    }
  }
}

.presets-section {
  h2 {
    font-size: 24px;
    font-weight: 600;
    color: white;
    margin: 0 0 20px 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }
  
  .presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    
    .preset-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      background: rgba(255, 255, 255, 0.1);
      border: 2px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      backdrop-filter: blur(10px);
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      
      &:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
      }
      
      &.active {
        background: rgba(99, 102, 241, 0.3);
        border-color: rgba(99, 102, 241, 0.6);
        box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
        
        .preset-status .status-indicator.playing {
          animation: pulse 2s infinite;
        }
      }
      
      .preset-icon {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        
        svg {
          color: white;
          width: 28px;
          height: 28px;
        }
      }
      
      .preset-info {
        flex: 1;
        
        h3 {
          font-size: 16px;
          font-weight: 600;
          color: white;
          margin: 0 0 4px 0;
        }
        
        p {
          font-size: 13px;
          color: rgba(255, 255, 255, 0.8);
          margin: 0;
          line-height: 1.4;
        }
      }
      
      .preset-status {
        flex-shrink: 0;
        
        .status-indicator {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 6px 10px;
          border-radius: 6px;
          font-size: 12px;
          font-weight: 500;
          transition: all 0.3s ease;
          
          &.playing {
            background: rgba(34, 197, 94, 0.2);
            color: #22c55e;
            border: 1px solid rgba(34, 197, 94, 0.3);
          }
          
          &.stopped {
            background: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.2);
          }
          
          svg {
            flex-shrink: 0;
          }
          
          span {
            white-space: nowrap;
          }
        }
      }
    }
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.noise-section {
  h2 {
    font-size: 24px;
    font-weight: 600;
    color: white;
    margin: 0 0 20px 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }
  
  .noise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    
    .noise-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px;
      background: rgba(255, 255, 255, 0.1);
      border: 2px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      backdrop-filter: blur(10px);
      cursor: pointer;
      transition: all 0.3s ease;
      min-height: 120px;
      
      &:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
      }
      
      &.active {
        background: rgba(99, 102, 241, 0.3);
        border-color: rgba(99, 102, 241, 0.6);
        box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
      }
      
      &.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        
        &:hover {
          transform: none;
          box-shadow: none;
        }
      }
      
      .noise-icon {
        margin-bottom: 10px;
        color:var(--title-color);
        
        svg {
          color: white;
          width: 28px;
          height: 28px;
        }
      }
      
      .noise-info {
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        
        .noise-label {
          font-size: 14px;
          font-weight: 500;
          color: white;
          margin-bottom: 8px;
        }
        
        .noise-volume {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 15px;
          
          .volume-slider {
            width: 80px;
            height: 2px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 2px;
            outline: none;
            cursor: pointer;
            
            &::-webkit-slider-thumb {
              appearance: none;
              width: 10px;
              height: 10px;
              background: white;
              border-radius: 50%;
              cursor: pointer;
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            }
          }
          
          .volume-text {
            color: rgba(255, 255, 255, 0.8);
            font-size: 11px;
          }
        }
      }
    }
  }
}



/* 响应式设计 */
@media (max-width: 768px) {
  .content-container {
    padding: 16px;
    gap: 20px;
  }
  
  .top-controls {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    
    .back-btn {
      align-self: flex-start;
    }
    
    .page-title {
      text-align: center;
      
      h1 {
        font-size: 28px;
      }
      
      p {
        font-size: 14px;
      }
    }
    
    .global-controls {
      flex-direction: column;
      gap: 12px;
      width: 100%;
      
      .volume-control,
      .master-toggle {
        width: 100%;
        justify-content: center;
      }
    }
  }
  
  .presets-section h2,
  .noise-section h2 {
    font-size: 20px;
  }
  
  .presets-grid {
    grid-template-columns: 1fr;
  }
  
  .noise-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* 主题适配 */
[data-theme="dark"] .white-noise-page {
  .background-overlay {
    background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 0.8) 100%
    );
  }
}

[data-theme="light"] .white-noise-page {
  .background-overlay {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0.5) 100%
    );
  }
  
  .page-title h1,
  .page-title p,
  .noise-section h2,
  .presets-section h2 {
    color: var(--text-primary, #1f2937);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
  }
  
  .global-controls,
  .preset-card,
  .noise-card,
  .back-btn {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary, #1f2937);
    
    svg {
      color: var(--text-primary, #1f2937);
    }
  }
}
</style>